<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>[[${item.info.skuName}]]</title>
		<link rel="stylesheet" type="text/css" href="/static/item/scss/shop.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/scss/main.css"/>
		<link rel="stylesheet" type="text/css" href="/static/item/scss/SHOUhou.css"/>
		<link rel="stylesheet" href="/static/item/scss/header.css" />
		<link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css"/>
	</head>
	<body>
		<div id="max" style="border:0px">
		<header style="width:1205px;">
			<!--品牌官方网站-->
					<div class="min">
						<ul class="header_ul_left">
							<li class="glyphicon glyphicon-home"> <a href="/" class="aa">首页</a></li>
						</ul>
						<ul class="header_ul_right">
              <li style="border: 0;" th:if="${session.loginUser} !=null">
                <a class="aa" style="width: 100px">[[${session.loginUser.username}]]</a>
                <!--              <a th:href="'http://member.taolele.com/user/' + ${session.loginUser.id}+ '.html'">你好，[[${session.loginUser.username}]]</a>-->
              </li>
              <li th:if="${session.loginUser} !=null">
                <a href="http://auth.taolele.com/oauth2.0/logout">退出登录</a>
              </li>
              <li style="border: 0;" th:if="${session.loginUser} ==null">
                <a href="http://auth.taolele.com/login.html" class="aa">你好，请登录 </a>
              </li>
              <li th:if="${session.loginUser} ==null">
                <a href="http://auth.taolele.com/reg.html" style="color: red;">免费注册</a>
              </li>
              <li th:if="${session.loginUser} !=null"><a href="http://member.taolele.com/memberOrder.html" class="aa">我的订单</a> |</li>
						</ul>
					</div>
				</header>
				<nav style="width:1205px;">
				<div class="nav_min">
					<div class="nav_top">
						<div class="nav_top_two"><input type="text"/><button>搜索</button></div>
						<div class="nav_top_three" style="margin-left: -21%;margin-top: 7.5%"><a href="http://cart.taolele.com/cart.html">我的购物车</a><span class="glyphicon glyphicon-shopping-cart"></span>
						</div>
					</div>
					<div class="nav_down">
						<ul class="nav_down_ul">
							<li class="nav_down_ul_1" style="width: 24%;float: left;"><a th:href="${'http://item.taolele.com/' + item.info.skuId + '.html'}">全部商品分类</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>

				</div>


			<div class="crumb-wrap" style="width:1205px">
			<div class="w">
				<div class="crumb">
					<div class="crumb-item">
            <a th:href="${'http://item.taolele.com/' + item.info.skuId + '.html'}">手机</a>
					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
            <a th:href="${'http://item.taolele.com/' + item.info.skuId + '.html'}">手机通讯</a>
					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
            <a th:href="${'http://item.taolele.com/' + item.info.skuId + '.html'}">手机</a>
					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
						<div class="crumb-item-one">
							华为 (HUAWEI)
							<img src="/static/item/img/4a79b87a68623d4e8a73aff3e25fa99b.png" alt="" class="img" />
							<div class="crumb-item-two ">
								<div class="crumb-item-con clear">
									<ul class="con-ul">
										<li>
											<img src="/static/item/img/5825a5a6Nde8ecb75.jpg" alt="" />
										</li>
										<li>
											<p>
												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
											</p>
											<p>
												￥1099.00
											</p>
										</li>
									</ul>
									<ul class="con-ul">
										<li>
											<img src="/static/item/img/5919637aN271a1301.jpg" alt="" />
										</li>
										<li>
											<p>
												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
											</p>
											<p>
												￥1099.00
											</p>
										</li>
									</ul>
									<ul class="con-ul">
										<li>
											<img src="/static/item/img/599a806bN9d829c1c.jpg" alt="" />
										</li>
										<li>
											<p>
												荣耀8青春版 全网通标配 3GB+32GB 幻海蓝
											</p>
											<p>
												￥1099.00
											</p>
										</li>
									</ul>
								</div>
								<div class="crumb-item-cons clear">
									<ul>
										<li>华为(huawei)</li>
										<li>小米(xiaomi)</li>
										<li>APPle</li>
										<li>魅族(meizu)</li>
										<li>锤子</li>

									</ul>
									<ul>
										<li>三星</li>
										<li>vivo</li>
										<li>飞利浦</li>
										<li>360</li>
										<li>更多>></li>

									</ul>
								</div>
							</div>

						</div>

					</div>
					<div class="crumb-item sep">></div>
					<div class="crumb-item">
            [[${item.info.skuName}]]
					</div>
				</div>

				<div class="contact">
					<ul class="contact-ul">

					</ul>
					<div class="contact-one">
						<ul>
							<li>客服</li>
							<li><img src="/static/item/img/f5831b9848b32440b381bcd30a3d96c7.png" alt="" />留言</li>
							<li><img src="/static/item/img/81a6326edc82d343a5a8860a6970f93b.png" alt="" />JIMI智能</li>
							<li>
								<img src="/static/item/img/1466134037230.jpg" class="contact-img" />
								<p>手机下单</p>
							</li>

						</ul>
						<div class="contact-two">
						</div>
					</div>
				</div>

			</div>
		</div>
<div class="Shop">
		<div class="box">
			<div class="box-one ">
				<div class="boxx">

					<div class="imgbox">
						<div class="probox">
							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
							<div class="hoverbox"></div>
						</div>
            <!-- 放大后的图片 -->
						<div class="showbox">
							<img class="img1" alt="" th:src="${item.info.skuDefaultImg}">
						</div>
					</div>

					<div class="box-lh">

						<div class="box-lh-one">
							<ul>
								<li th:each="img : ${item.images}" th:if="${!#strings.isEmpty(img.imgUrl)}"><img th:src="${img.imgUrl}" /></li>
							</ul>
						</div>
						<div id="left">
							< </div>
								<div id="right">
									>
								</div>

						</div>

						<div class="boxx-one">
							<ul>
								<li>

								</li>
								<li>

								</li>
							</ul>
						</div>

					</div>
					<div class="box-two">
						<div class="box-name" th:text="${item.info.skuTitle}">
              华为 HUAWEI P40 Pro+ 麒麟990 5G 钛空银 套餐二 【白条12期免息送碎屏险】华为 P40 Pro 5G手机 分期
						</div>
						<div class="box-hide" th:text="${item.info.skuSubtitle}">【下单立减100/12期免息/咨询可省更多钱】赠原装碎屏险+华为原装无线充+华为智能手环+AI智能蓝牙音箱+硅胶保护壳+保护膜+晒单礼购买P40咨询客服享优惠
							<a href="/static/item/"><u>华为 HUAWEI Mate 10 Pro 10:08 限时限量抢！</u></a>
						</div>
						<div class="box-summary clear">
							<ul>
								<li>淘乐乐商城价</li>
								<li>
									<span>￥</span>
									<span th:text="${#numbers.formatDecimal(item.info.price,3,2)}">4499.00</span>
								</li>
								<li style="color: red" th:if="${item.seckillInfoVo!=null}">
									<span th:if="${#dates.createNow().getTime() < item.seckillInfoVo.startTime}">商品将会在 [[${#dates.format(new java.util.Date(item.seckillInfoVo.startTime),"yyyy-MM-dd HH:mm:ss")}]] 进行秒杀</span>
									<span th:if="${#dates.createNow().getTime() >= item.seckillInfoVo.startTime && #dates.createNow().getTime() <= item.seckillInfoVo.endTime}">秒杀价： [[${#numbers.formatDecimal(item.seckillInfoVo.seckillPrice,1,2)}]]</span>
								</li>
								<li>

								</li>
							</ul>
						</div>

						<div class="box-attr-3">
							<div class="box-attr clear" th:each="attr : ${item.saleAttr}">
								<dl>
									<dt>选择[[${attr.attrName}]]</dt>
									<dd th:each="vals : ${attr.attrValues}">
										<a  class="sku_attr_value" th:attr="skus=${vals.skuIds},class=${#lists.contains(#strings.listSplit(vals.skuIds,','), item.info.skuId.toString())?'sku_attr_value checked':'sku_attr_value'}" >
											<!--<img src="/static/item/img/59ddfcb1Nc3edb8f1.jpg" />--> [[${vals.attrValue}]]
										</a>
									</dd>
								</dl>
							</div>
						</div>

						<div class="box-btns clear">
							<div class="box-btns-one">
								<input type="text" name="" id="numInput" value="1" />
								<div class="box-btns-one1">

									<div>
										<button id="jia">
									+
									</button>
									</div>
									<div>
										<button id="jian">
										-
									</button>
									</div>

								</div>
							</div>
							<div class="box-btns-two" th:if="${item.seckillInfoVo != null && (#dates.createNow().getTime() >= item.seckillInfoVo.startTime && #dates.createNow().getTime() <= item.seckillInfoVo.endTime)}">
								<a id="secKillA" th:attr="skuId=${item.info.skuId},sessionId=${item.seckillInfoVo.promotionSessionId},code=${item.seckillInfoVo.randomCode}">
									立即抢购
								</a>
							</div>
              <div class="box-btns-two" th:if="${item.seckillInfoVo == null || (#dates.createNow().getTime() < item.seckillInfoVo.startTime || #dates.createNow().getTime() > item.seckillInfoVo.endTime)}">
                <a id="addToCartA" th:attr="skuId=${item.info.skuId}">
                  加入购物车
                </a>
              </div>

						</div>

						<div class="box-footer-zo">

						</div>
					</div>

				</div>
			</div>


			<div class="ShopXiangqing">
				<!--商品介绍-->
				<div class="allquanbushop">
					<ul class="shopjieshao">
						<li class="jieshoa" style="background: #e4393c;">
							<a style="color: white;">商品介绍</a>
						</li>


					</ul>

					<ul class="shopjieshaos posi" style="display: none;">
						<li class="jieshoa" style="background: #e4393c;">
							<a href="/static/item/#li1" style="color: white;">商品介绍</a>
						</li>


					</ul>

					<!--商品详情-->
					<div class="huawei">
						<ul class="xuanxiangka">
							<li class="jieshoa actives" id="li1">
								<div class="shanpinsssss">
									<img class="xiaoguo" width="100%" th:each="descp : ${#strings.listSplit(item.desc.decript,',')}" th:src="${descp}" />
									<div class="guiGebox guiGebox1">
										<div class="guiGe" th:each="guige : ${item.groupAttrs}">
											<h3 th:text="${guige.groupName}">主体</h3>
										</div>

									</div>
								</div>
							</li>
							<li class="baozhuang actives" id="li2">
								<div class="guiGebox">
									<div class="guiGe" th:each="group : ${item.groupAttrs}">
										<h3 th:text="${group.groupName}">主体</h3>
										<dl>
											<div th:each="attr : ${group.attrs}">
												<dt th:text="${attr.attrName}">品牌</dt>
												<dd th:text="${attr.attrValue}">华为(HUAWEI)</dd>
                      						</div>
										</dl>
									</div>

								</div>
							</li>

						</ul>
					</div>
				</div>
			</div>
		</div>

	</body>
  <script src="/static/item/js/jquery1.9.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/item/js/js.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="/static/layer/layer.js"></script>
  <script type="text/javascript">
      $(".sku_attr_value").click(function () {
          var skus = new Array();
          // 1.获取所有加了checked的属性
          // 1.1 点击的元素加上自定义属性
          $(this).addClass("clicked");
          var curr = $(this).attr("skus").split(",");
          // 当前被点击的所有sku组合的数组放进去
          skus.push(curr)
          // 去掉同一行所有的checked
          $(this).parent().parent().find(".sku_attr_value").removeClass("checked");

          $("a[class='sku_attr_value checked']").each(function () {
              skus.push($(this).attr("skus").split(","));
          });
          // 2.取出他们的交集 得到skuId 调用filter方法的一定是jQuery元素
          var filterEle = skus[0];
          for(var i = 1; i< skus.length;i ++){
              filterEle = $(filterEle).filter(skus[i]);
          }
          console.log(filterEle[0])
          // 3.跳转
          location.href = "http://item.taolele.com/" + filterEle[0] + ".html";
      });
      // 属性的回显
      $(function () {
          $(".sku_attr_value").parent().css({"border":"solid 1px #CCC"});
          $("a[class='sku_attr_value checked']").parent().css({"border":"solid 1px red"});
      })

    $("#addToCartA").click(function () {
        let num = $("#numInput").val();
        // 获取当前按钮的自定义属性
        let skuId = $(this).attr("skuId");
        location.href = "http://cart.taolele.com/addToCart?skuId=" + skuId + "&num=" + num;
        return false;
    })
    $("#secKillA").click(function () {
        var isLogin = [[${session.loginUser != null}]]
        if(isLogin){
            var killId = $(this).attr("sessionid") + "-" + $(this).attr("skuid");
            var num = $("#numInput").val();
            location.href = "http://seckill.taolele.com/kill?killId=" + killId + "&key=" + $(this).attr("code") + "&num=" + num;
        }else{
            layer.msg("请先登录!")
        }
        return false;
    })
  </script>
</html>
